import React, { useEffect, useMemo, useState } from 'react';
import Modals from '@/components/modals/Modals';
import { Avatar, Input, ModalProps } from 'antd';
import { SvgIcon } from '@/components/icon';
import '../../index.scss';
import useTable from '@/hooks/use-table';
import modelService from '@/api/services/modelService';
import { GetCreatedListItem, GetProviderListItem } from '@/common/types';
import NotData from '@/components/NotData';
import { CircleLoading } from '@/components/loading';
import GradientBox from '@/components/GradientBox';

interface Props extends ModalProps {
  open: boolean;
  onCancel: () => void;
  onOk: (value: GetProviderListItem) => void;
  selectProvider?: GetCreatedListItem[];
}

const addModel = {
  name: '',
  avatar: 'Custom',
  description: '',
  isLocal: false,
  isThirdParty: true,
};

const index = ({ onCancel, onOk, selectProvider, ...props }: Props) => {
  const [selected, setSelected] = useState<GetProviderListItem>();

  const {
    tablesValue,
    getTables,
    pagingInfo,
    handleSearchText,
    searchText,
    setTablesValue,
    loading,
    handleSearchTextInit,
  } = useTable<GetProviderListItem>(modelService.getProviderList);

  useEffect(() => {
    if (props.open) {
      handleSearchTextInit('');
      getTables();
    }
  }, [props.open]);

  const handleSelected = (item: GetProviderListItem) => {
    if (item.name === selected?.name) {
      setSelected(undefined);
      return;
    }
    setSelected(item);
  };

  const onSubmit = () => {
    if (selected) {
      setSelected(undefined);
      onOk(selected);
    } else {
    }
  };

  const cancel = () => {
    setSelected(undefined);
    onCancel();
  };

  const handleInit = (open: boolean) => {
    console.log('open', open);
    if (!open) {
      // init();
    }
    // if (!open) {
    //   setSelected(undefined);
    // }
  };

  return (
    <Modals
      {...props}
      onOk={onSubmit}
      onCancel={cancel}
      title="选择模型供应商"
      width={770}
      destroyOnHidden
      okText="下一步"
      afterOpenChange={handleInit}
    >
      <Input
        value={searchText}
        onChange={(e) => handleSearchText(e.target.value)}
        suffix={<SvgIcon icon="searchModel" size={16} color="text-text-4" />}
        placeholder="请输入供应商名称"
      />
      <div
        className={`mt-4 h-[436px] w-full  ${
          !loading ? 'grid grid-cols-3 grid-rows-3 gap-[10px] overflow-auto' : ''
        }`}
      >
        {loading ? (
          <CircleLoading />
        ) : (
          <React.Fragment>
            {'第三方模型'.includes(searchText) && (
              <GradientBox
                onClick={() => handleSelected(addModel)}
                key={'add-model'}
                active={selected && selected.isThirdParty}
                disabled={selectProvider?.some((item) => item.isThirdParty)}
                className={`px-4 py-5`}
              >
                <div className="flex items-center">
                  <div className="w-10">
                    <SvgIcon icon={'CustomModel'} size={40} color="#fff" />
                  </div>
                  <div className="text-truncate ml-4 text-base font-bold text-text-5">
                    第三方模型
                  </div>
                </div>
                <div className="text-truncate mt-4 text-xs text-text-4">可自行添加的第三方模型</div>
              </GradientBox>
            )}
            {tablesValue.map((item, index) => (
              <GradientBox
                onClick={() => handleSelected(item)}
                className={`px-4 py-5`}
                // contentClass={`px-4 py-5`}
                active={selected && selected.name === item.name}
                key={index}
                disabled={selectProvider?.some((value) => value.name === item.name)}
              >
                <div className="flex items-center">
                  <div className="w-10">
                    <SvgIcon icon={item.avatar} size={40} color="#fff" />
                  </div>
                  <div className="text-truncate ml-4 text-base font-bold text-text-5">
                    {item.name}
                  </div>
                </div>
                <div className="text-truncate mt-4 text-xs text-text-4">{item.description}</div>
              </GradientBox>
            ))}
          </React.Fragment>
        )}
      </div>
    </Modals>
  );
};

export default index;
